<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-blue">
			<block slot="content">实时质量监控</block>
			<template slot="backText">
				<text class="cuIcon-back" @tap="beforePage"></text>
			</template>
		</cu-custom>
		<!-- 主题内容 -->
		<view  class="public-main">
			<view class="public-main-info">
				<view class="u-main">
					<view class="u-font-weight7 u-solid-b-blue padding-sm">
						<text>钢卷号</text>
						<text>{{coil}}</text>
					</view>
					<!-- 容器 -->
					<view class="padding-lr-30">
						<!-- 每一列 -->
						<view class="dashed-bottom padding-tb-20">
							<!-- 头部 -->
							<view class="font-size28 u-font-weight">精轧宽度曲线</view>
							<view class="flex">
								<view style="width: 33%;">
									<view class="order-info-list">
										<text class="u-font-weight6">目标值</text>
										<text class="u-font-weight margin-left-10">{{jingW.targetValue}}</text>
									</view>
									<view class="order-info-list">
										<text class="u-font-weight6">命中率</text>
										<text class="u-font-weight margin-left-10">{{jingW.rate}}%</text>
									</view>
								</view>
								<view style="width: 33%;">
									<view class="order-info-list">
										<text class="u-font-weight6">上公差</text>
										<text class="u-font-weight margin-left-10">{{jingW.upperTolerance}}</text>
									</view>
									<view class="order-info-list">
										<text class="u-font-weight6">平均值</text>
										<text class="u-font-weight margin-left-10">{{jingW.average}}</text>
									</view>
								</view>
								<view style="width: 33%;">
									<view class="order-info-list">
										<text class="u-font-weight6">下公差</text>
										<text class="u-font-weight margin-left-10">{{jingW.lowerTolerance}}</text>
									</view>
									<view class="order-info-list">
										<text class="u-font-weight6">均方值</text>
										<text class="u-font-weight margin-left-10">{{jingW.meanSquareError}}</text>
									</view>
								</view>
							</view>
							<view class="mass-echarts">
								<u-charts
								 class="mass-echarts"
								 :legend="{show:false}"
								 :canvas-id="jingW.id" 
								 :chartType="jingW.chartType" 
								 :cWidth="jingW.radarWidth" 
								 :cHeight="jingW.radarHeight" 
								 :opts="jingW.opts"
								 :xAxis="jingW.xAxis"
								 :yAxis="jingW.yAxis"
								 :ref="jingW.id" />
							</view>
						</view>
						<!-- 每一列 -->
						<view class="dashed-bottom padding-tb-20">
							<!-- 头部 -->
							<view class="font-size28 u-font-weight">精轧厚度曲线</view>
							<view class="flex">
								<view style="width: 33%;">
									<view class="order-info-list">
										<text class="u-font-weight6">目标值</text>
										<text class="u-font-weight margin-left-10">{{jingT.targetValue}}</text>
									</view>
									<view class="order-info-list">
										<text class="u-font-weight6">命中率</text>
										<text class="u-font-weight margin-left-10">{{jingT.rate}}%</text>
									</view>
								</view>
								<view style="width: 33%;">
									<view class="order-info-list">
										<text class="u-font-weight6">上公差</text>
										<text class="u-font-weight margin-left-10">{{jingT.upperTolerance}}</text>
									</view>
									<view class="order-info-list">
										<text class="u-font-weight6">平均值</text>
										<text class="u-font-weight margin-left-10">{{jingT.average}}</text>
									</view>
								</view>
								<view style="width: 33%;">
									<view class="order-info-list">
										<text class="u-font-weight6">下公差</text>
										<text class="u-font-weight margin-left-10">{{jingT.lowerTolerance}}</text>
									</view>
									<view class="order-info-list">
										<text class="u-font-weight6">均方值</text>
										<text class="u-font-weight margin-left-10">{{jingT.meanSquareError}}</text>
									</view>
								</view>
							</view>
							<view class="mass-echarts">
								<u-charts
								 class="mass-echarts"
								 :legend="{show:false}"
								 :canvas-id="jingT.id" 
								 :chartType="jingT.chartType" 
								 :cWidth="jingT.radarWidth" 
								 :cHeight="jingT.radarHeight" 
								 :opts="jingT.opts"
								 :xAxis="jingT.xAxis"
								 :yAxis="jingT.yAxis"
								 :ref="jingT.id" />
							</view>
						</view>
						<!-- 每一列 -->
						<view class="dashed-bottom padding-tb-20">
							<!-- 头部 -->
							<view class="font-size28 u-font-weight">精轧平度曲线</view>
							<view class="flex">
								<view style="width: 33%;">
									<view class="order-info-list">
										<text class="u-font-weight6">目标值</text>
										<text class="u-font-weight margin-left-10">{{jingP.targetValue}}</text>
									</view>
									<view class="order-info-list">
										<text class="u-font-weight6">命中率</text>
										<text class="u-font-weight margin-left-10">{{jingP.rate}}%</text>
									</view>
								</view>
								<view style="width: 33%;">
									<view class="order-info-list">
										<text class="u-font-weight6">上公差</text>
										<text class="u-font-weight margin-left-10">{{jingP.upperTolerance}}</text>
									</view>
									<view class="order-info-list">
										<text class="u-font-weight6">平均值</text>
										<text class="u-font-weight margin-left-10">{{jingP.average}}</text>
									</view>
								</view>
								<view style="width: 33%;">
									<view class="order-info-list">
										<text class="u-font-weight6">下公差</text>
										<text class="u-font-weight margin-left-10">{{jingP.lowerTolerance}}</text>
									</view>
									<view class="order-info-list">
										<text class="u-font-weight6">均方值</text>
										<text class="u-font-weight margin-left-10">{{jingP.meanSquareError}}</text>
									</view>
								</view>
							</view>
							<view class="mass-echarts">
								<u-charts
								 class="mass-echarts"
								 :legend="{show:false}"
								 :canvas-id="jingP.id" 
								 :chartType="jingP.chartType" 
								 :cWidth="jingP.radarWidth" 
								 :cHeight="jingP.radarHeight" 
								 :opts="jingP.opts"
								 :xAxis="jingP.xAxis"
								 :yAxis="jingP.yAxis"
								 :ref="jingP.id" />
							</view>
						</view>
						<!-- 每一列 -->
						<view class="dashed-bottom padding-tb-20">
							<!-- 头部 -->
							<view class="font-size28 u-font-weight">精轧凸度曲线</view>
							<view class="flex">
								<view style="width: 33%;">
									<view class="order-info-list">
										<text class="u-font-weight6">目标值</text>
										<text class="u-font-weight margin-left-10">{{jingC.targetValue}}</text>
									</view>
									<view class="order-info-list">
										<text class="u-font-weight6">命中率</text>
										<text class="u-font-weight margin-left-10">{{jingC.rate}}%</text>
									</view>
								</view>
								<view style="width: 33%;">
									<view class="order-info-list">
										<text class="u-font-weight6">上公差</text>
										<text class="u-font-weight margin-left-10">{{jingC.upperTolerance}}</text>
									</view>
									<view class="order-info-list">
										<text class="u-font-weight6">平均值</text>
										<text class="u-font-weight margin-left-10">{{jingC.average}}</text>
									</view>
								</view>
								<view style="width: 33%;">
									<view class="order-info-list">
										<text class="u-font-weight6">下公差</text>
										<text class="u-font-weight margin-left-10">{{jingC.lowerTolerance}}</text>
									</view>
									<view class="order-info-list">
										<text class="u-font-weight6">均方值</text>
										<text class="u-font-weight margin-left-10">{{jingC.meanSquareError}}</text>
									</view>
								</view>
							</view>
							<view class="mass-echarts">
								<u-charts
								 class="mass-echarts"
								 :legend="{show:false}"
								 :canvas-id="jingC.id" 
								 :chartType="jingC.chartType" 
								 :cWidth="jingC.radarWidth" 
								 :cHeight="jingC.radarHeight" 
								 :opts="jingC.opts"
								 :xAxis="jingC.xAxis"
								 :yAxis="jingC.yAxis"
								 :ref="jingC.id" />
							</view>
						</view>
						<view class="dashed-bottom padding-tb-20">
							<!-- 头部 -->
							<view class="font-size28 u-font-weight">精轧楔形曲线</view>
							<view class="flex">
								<view style="width: 33%;">
									<view class="order-info-list">
										<text class="u-font-weight6">目标值</text>
										<text class="u-font-weight margin-left-10">{{jingX.targetValue}}</text>
									</view>
									<view class="order-info-list">
										<text class="u-font-weight6">命中率</text>
										<text class="u-font-weight margin-left-10">{{jingX.rate}}%</text>
									</view>
								</view>
								<view style="width: 33%;">
									<view class="order-info-list">
										<text class="u-font-weight6">上公差</text>
										<text class="u-font-weight margin-left-10">{{jingX.upperTolerance}}</text>
									</view>
									<view class="order-info-list">
										<text class="u-font-weight6">平均值</text>
										<text class="u-font-weight margin-left-10">{{jingX.average}}</text>
									</view>
								</view>
								<view style="width: 33%;">
									<view class="order-info-list">
										<text class="u-font-weight6">下公差</text>
										<text class="u-font-weight margin-left-10">{{jingX.lowerTolerance}}</text>
									</view>
									<view class="order-info-list">
										<text class="u-font-weight6">均方值</text>
										<text class="u-font-weight margin-left-10">{{jingX.meanSquareError}}</text>
									</view>
								</view>
							</view>
							<view class="mass-echarts">
								<u-charts
								 class="mass-echarts"
								 :legend="{show:false}"
								 :canvas-id="jingX.id" 
								 :chartType="jingX.chartType" 
								 :cWidth="jingX.radarWidth" 
								 :cHeight="jingX.radarHeight" 
								 :opts="jingX.opts"
								 :xAxis="jingX.xAxis"
								 :yAxis="jingX.yAxis"
								 :ref="jingX.id" />
							</view>
						</view>
						<view class="dashed-bottom padding-tb-20">
							<!-- 头部 -->
							<view class="font-size28 u-font-weight">卷取温度曲线</view>
							<view class="flex">
								<view style="width: 33%;">
									<view class="order-info-list">
										<text class="u-font-weight6">目标值</text>
										<text class="u-font-weight margin-left-10">{{jingJ.targetValue}}</text>
									</view>
									<view class="order-info-list">
										<text class="u-font-weight6">命中率</text>
										<text class="u-font-weight margin-left-10">{{jingJ.rate}}%</text>
									</view>
								</view>
								<view style="width: 33%;">
									<view class="order-info-list">
										<text class="u-font-weight6">上公差</text>
										<text class="u-font-weight margin-left-10">{{jingJ.upperTolerance}}</text>
									</view>
									<view class="order-info-list">
										<text class="u-font-weight6">平均值</text>
										<text class="u-font-weight margin-left-10">{{jingJ.average}}</text>
									</view>
								</view>
								<view style="width: 33%;">
									<view class="order-info-list">
										<text class="u-font-weight6">下公差</text>
										<text class="u-font-weight margin-left-10">{{jingJ.lowerTolerance}}</text>
									</view>
									<view class="order-info-list">
										<text class="u-font-weight6">均方值</text>
										<text class="u-font-weight margin-left-10">{{jingJ.meanSquareError}}</text>
									</view>
								</view>
							</view>
							<view class="mass-echarts">
								<u-charts
								 class="mass-echarts"
								 :legend="{show:false}"
								 :canvas-id="jingJ.id" 
								 :chartType="jingJ.chartType" 
								 :cWidth="jingJ.radarWidth" 
								 :cHeight="jingJ.radarHeight" 
								 :opts="jingJ.opts"
								 :xAxis="jingJ.xAxis"
								 :yAxis="jingJ.yAxis"
								 :ref="jingJ.id" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { post } from "@/lib/Util.js";
	import uCharts from '@/components/u-charts/component.vue';
	import {GET_QUALITY_REALtIME_CURVE} from '@/common/api/quality.js'
	export default {
		components: {
			uCharts
		},
		data() {
			return {
				coil: '',
				jingW: {
					targetValue: '', // 目标值
					upperTolerance: '', // 上公差
					lowerTolerance: '', // 下公差
					rate: '', // 命中率
					average: '', // 平均值
					meanSquareError: '', // 均方差
					radarWidth: uni.upx2px(670),
					radarHeight: uni.upx2px(300),
					chartType: "line",
					extraType: "",
					id: "massWidth",
					xAxis: {
						disableGrid: true,
						disabled:false,
						gridType: 'dash',
						labelCount: 9,
						itemCount: 500
					},
					yAxis: {
						disabled:false
					},
					opts: {
						categories: [0,0,0,0,0,0,],
						series: [{
							name: '精轧宽度',
							data: [0, 0, 0, 0, 0, 0]
						}]
					}
				},
				jingT: {
					targetValue: '', // 目标值
					upperTolerance: '', // 上公差
					lowerTolerance: '', // 下公差
					rate: '', // 命中率
					average: '', // 平均值
					meanSquareError: '', // 均方差
					radarWidth: uni.upx2px(670),
					radarHeight: uni.upx2px(300),
					chartType: "line",
					extraType: "",
					id: "massthinese",
					xAxis: {
						disableGrid: true,
						disabled:false,
						gridType: 'dash',
						labelCount: 9,
						itemCount: 500
					},
					yAxis: {
						disabled:false
					},
					opts: {
						categories: [0,0,0,0,0,0,],
						series: [{
							name: '精轧厚度',
							data: [0, 0, 0, 0, 0, 0]
						}]
					}
				},
				jingP: {
					targetValue: '', // 目标值
					upperTolerance: '', // 上公差
					lowerTolerance: '', // 下公差
					rate: '', // 命中率
					average: '', // 平均值
					meanSquareError: '', // 均方差
					radarWidth: uni.upx2px(670),
					radarHeight: uni.upx2px(300),
					chartType: "line",
					extraType: "",
					id: "pingdu",
					xAxis: {
						disableGrid: true,
						disabled:false,
						gridType: 'dash',
						labelCount: 9,
						itemCount: 500
					},
					yAxis: {
						disabled:false
					},
					opts: {
						categories: [0,0,0,0,0,0,],
						series: [{
							name: '精轧平度',
							data: [0, 0, 0, 0, 0, 0]
						}]
					}
				},
				jingC: {
					targetValue: '', // 目标值
					upperTolerance: '', // 上公差
					lowerTolerance: '', // 下公差
					rate: '', // 命中率
					average: '', // 平均值
					meanSquareError: '', // 均方差
					radarWidth: uni.upx2px(670),
					radarHeight: uni.upx2px(300),
					chartType: "line",
					extraType: "",
					id: "convexity",
					xAxis: {
						disableGrid: true,
						disabled:false,
						gridType: 'dash',
						labelCount: 9,
						itemCount: 500
					},
					yAxis: {
						disabled:false
					},
					opts: {
						categories: [0,0,0,0,0,0,],
						series: [{
							name: '精轧凸度',
							data: [0, 0, 0, 0, 0, 0]
						}]
					}
				},
				jingX: {
					targetValue: '', // 目标值
					upperTolerance: '', // 上公差
					lowerTolerance: '', // 下公差
					rate: '', // 命中率
					average: '', // 平均值
					meanSquareError: '', // 均方差
					radarWidth: uni.upx2px(670),
					radarHeight: uni.upx2px(300),
					chartType: "line",
					extraType: "",
					id: "xiexing",
					xAxis: {
						disableGrid: true,
						disabled:false,
						gridType: 'dash',
						labelCount: 9,
						itemCount: 500
					},
					yAxis: {
						disabled:false
					},
					opts: {
						categories: [0,0,0,0,0,0,],
						series: [{
							name: '精轧楔形',
							data: [0, 0, 0, 0, 0, 0]
						}]
					}
				},
				jingJ: {
					targetValue: '', // 目标值
					upperTolerance: '', // 上公差
					lowerTolerance: '', // 下公差
					rate: '', // 命中率
					average: '', // 平均值
					meanSquareError: '', // 均方差
					radarWidth: uni.upx2px(670),
					radarHeight: uni.upx2px(300),
					chartType: "line",
					extraType: "",
					id: "juanqu",
					xAxis: {
						disableGrid: true,
						disabled:false,
						gridType: 'dash',
						labelCount: 9,
						itemCount: 500
					},
					yAxis: {
						disabled:false
					},
					opts: {
						categories: [0,0,0,0,0,0,],
						series: [{
							name: '卷取温度',
							data: [0, 0, 0, 0, 0, 0]
						}]
					}
				}
			}
		},
		onLoad(options) {
			this.coil = options.param
			this.getWidthInfo(options.param)
			this.getthicknessInfo(options.param)
			this.getflatnessInfo(options.param)
			this.getconvexityInfo(options.param)
			this.getWedgeInfo(options.param)
			this.getTempInfo(options.param)
		},
		methods: {
			beforePage() {
				uni.navigateBack({
					delta: 1
				});
			},
			async getWidthInfo(val) {
				let res = await post(GET_QUALITY_REALtIME_CURVE, {
					tag: 'width',
					coilNo: val
				})
				if(res.code == 0) {
					this.jingW.targetValue = res.data.targetValue
					this.jingW.upperTolerance = res.data.upperTolerance
					this.jingW.lowerTolerance = res.data.lowerTolerance
					this.jingW.rate = res.data.rate
					this.jingW.average = res.data.average
					this.jingW.meanSquareError = res.data.meanSquareError
					this.jingW.opts.series[0].data = res.data.curve
					let data = []
					for(let i = 0; i < res.data.curve.length; i++) {
						data.push(i)
					}
					this.jingW.xAxis.itemCount = data.length
					this.jingW.opts.categories = data
				}
			},
			async getthicknessInfo(val) {
				let res = await post(GET_QUALITY_REALtIME_CURVE, {
					tag: 'thickness',
					coilNo: val
				})
				if(res.code == 0) {
					this.jingT.targetValue = res.data.targetValue
					this.jingT.upperTolerance = res.data.upperTolerance
					this.jingT.lowerTolerance = res.data.lowerTolerance
					this.jingT.rate = res.data.rate
					this.jingT.average = res.data.average
					this.jingT.meanSquareError = res.data.meanSquareError
					this.jingT.opts.series[0].data = res.data.curve
					let data = []
					for(let i = 0; i < res.data.curve.length; i++) {
						data.push(i)
					}
					this.jingT.xAxis.itemCount = data.length
					this.jingT.opts.categories = data
				}
			},
			async getflatnessInfo(val) {
				let res = await post(GET_QUALITY_REALtIME_CURVE, {
					tag: 'flatness',
					coilNo: val
				})
				if(res.code == 0) {
					this.jingP.targetValue = res.data.targetValue
					this.jingP.upperTolerance = res.data.upperTolerance
					this.jingP.lowerTolerance = res.data.lowerTolerance
					this.jingP.rate = res.data.rate
					this.jingP.average = res.data.average
					this.jingP.meanSquareError = res.data.meanSquareError
					this.jingP.opts.series[0].data = res.data.curve
					let data = []
					for(let i = 0; i < res.data.curve.length; i++) {
						data.push(i)
					}
					this.jingP.xAxis.itemCount = data.length
					this.jingP.opts.categories = data
				}
			},
			async getconvexityInfo(val) {
				let res = await post(GET_QUALITY_REALtIME_CURVE, {
					tag: 'convexity',
					coilNo: val
				})
				if(res.code == 0) {
					this.jingC.targetValue = res.data.targetValue
					this.jingC.upperTolerance = res.data.upperTolerance
					this.jingC.lowerTolerance = res.data.lowerTolerance
					this.jingC.rate = res.data.rate
					this.jingC.average = res.data.average
					this.jingC.meanSquareError = res.data.meanSquareError
					this.jingC.opts.series[0].data = res.data.curve
					let data = []
					for(let i = 0; i < res.data.curve.length; i++) {
						data.push(i)
					}
					this.jingC.xAxis.itemCount = data.length
					this.jingC.opts.categories = data
				}
			},
			async getWedgeInfo(val) {
				let res = await post(GET_QUALITY_REALtIME_CURVE, {
					tag: 'Wedge',
					coilNo: val
				})
				if(res.code == 0) {
					this.jingX.targetValue = res.data.targetValue
					this.jingX.upperTolerance = res.data.upperTolerance
					this.jingX.lowerTolerance = res.data.lowerTolerance
					this.jingX.rate = res.data.rate
					this.jingX.average = res.data.average
					this.jingX.meanSquareError = res.data.meanSquareError
					this.jingX.opts.series[0].data = res.data.curve
					let data = []
					for(let i = 0; i < res.data.curve.length; i++) {
						data.push(i)
					}
					this.jingX.xAxis.itemCount = data.length
					this.jingX.opts.categories = data
				}
			},
			async getTempInfo(val) {
				let res = await post(GET_QUALITY_REALtIME_CURVE, {
					tag: 'temp',
					coilNo: val
				})
				if(res.code == 0) {
					this.jingJ.targetValue = res.data.targetValue
					this.jingJ.upperTolerance = res.data.upperTolerance
					this.jingJ.lowerTolerance = res.data.lowerTolerance
					this.jingJ.rate = res.data.rate
					this.jingJ.average = res.data.average
					this.jingJ.meanSquareError = res.data.meanSquareError
					this.jingJ.opts.series[0].data = res.data.curve
					let data = []
					for(let i = 0; i < res.data.curve.length; i++) {
						data.push(i)
					}
					this.jingJ.xAxis.itemCount = data.length
					this.jingJ.opts.categories = data
				}
			}
		}
	}
</script>

<style>
	.mass-echarts {
		width: 670upx;
		height: 300upx;
	}
</style>
